<template>
  <div class="area">
    <van-field :readonly="element.readonly" :disabled="element.disabled" clickable name="area" :required="element.required" :value="areaName" :label="element.label" :placeholder="element.placeholder" @click="areaClick" />
    <van-popup v-model="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" :columns-num="element.columns" :title="element.title" />
    </van-popup>
  </div>
</template>

<script>

export default {
  name: 'areaItem',
  inject: ['element'],
  data() {
    return {
      // areaName: '',
      showArea: false
    }
  },
  computed: {
    areaList() {
      return this.element.areaList
    },
    vModel() {
      return this.element.vModel
    },
    // 地区的层级
    columns() {
      return this.element.columns
    },
    areaName() {
      const vModelArr = this.vModel.split(',')
      const arr = Object.entries(this.areaList).map((item, index) => {
        return item[1][vModelArr[index]]
      })
      return this.vModel === '' ? '' : arr.filter((item) => !!item).join('/')
    }
  },
  methods: {
    areaClick() {
      if (this.element.readonly || this.element.disabled) {
        return
      }
      this.showArea = true
    },
    onConfirm(values) {
      // this.areaName = values.map(item => item.name).join('/')
      this.showArea = false
      const areaCode =  values.map(item => item.code).join(',')
      this.$emit('onConfirm', areaCode)
      // console.log(this.areaName, values, '==value')
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell:last-child::after {
  display: block;
}
</style>